<app-nav-progress-bar />

<div id="ng-content" [style.transform]="isDrawerOpen ? 'translateX(245px)' : null">
  <div class="page-wrapper" [class.page-wrapper-rtl]="dir() === 'rtl'" [dir]="dir()">
    <app-header />
    <div class="main-wrapper">
      <div nz-row>
        @if (!app.isMobile()) {
          <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6" [nzLg]="6" [nzXl]="5" [nzXXl]="4" class="main-menu">
            <nz-affix [nzOffsetTop]="0">
              <section class="main-menu-inner">
                <ng-template [ngTemplateOutlet]="sideOrDrawerTpl"></ng-template>
              </section>
            </nz-affix>
          </div>
        }
        <div
          nz-col
          class="main-container main-container-component"
          [nzXs]="24"
          [nzSm]="24"
          [nzMd]="18"
          [nzLg]="18"
          [nzXl]="19"
          [nzXXl]="20"
        >
          <router-outlet />
          <app-contributors-list />
        </div>
      </div>
      <div nz-row>
        <div
          nz-col
          [nzXs]="{ span: 24 }"
          [nzSm]="{ span: 24 }"
          [nzMd]="{ span: 24 }"
          [nzLg]="{ span: 18, offset: 6 }"
          [nzXl]="{ span: 19, offset: 5 }"
          [nzXXl]="{ span: 20, offset: 4 }"
        >
          <app-fixed-widgets (themeChange)="onThemeChange($event)" />
          <app-nav-bottom />
          <app-footer [colorHex]="color" (colorChange)="changeColor($event)" />
        </div>
      </div>
    </div>
  </div>
</div>

@if (app.isMobile()) {
  <div class="drawer-wrapper">
    <div class="drawer drawer-left" [class.drawer-open]="isDrawerOpen">
      <div class="drawer-mask" (click)="isDrawerOpen = false"></div>
      <div class="drawer-content-wrapper" [style.transform]="isDrawerOpen ? null : 'translateX(-100%)'">
        <div class="drawer-content">
          <ng-container [ngTemplateOutlet]="sideOrDrawerTpl"></ng-container>
        </div>
        <div class="drawer-handle" (click)="isDrawerOpen = !isDrawerOpen">
          <span class="drawer-handle-icon"></span>
        </div>
      </div>
    </div>
  </div>
}

<ng-template #sideOrDrawerTpl>
  <app-side />
</ng-template>
